<template>
    <div class="main">
        <div class="frame">
            <div class="img"></div>
            <router-view></router-view>
        </div>
    </div>
</template>

<script setup>
    defineOptions({
        name:'Login'
    })
</script>

<style lang="scss" scoped>
    .main {
        display: flex; /* 如果需要内容居中 */
        align-items: center;
        justify-content: center;
        width: 99vw;
        height: 98vh;
        background-image: url('@/assets/image/login-bg/loginBG.jpg');
        background-size: cover;

        .frame {
            height: 450px;
            width: 700px;
            padding: 5px;
            background-color: white;
            border-radius: 5px;
            display: flex;
            position: relative;
            
            .img {
                border-radius: 5px;
                flex:0 1 auto;
                width: 47%; /* 或指定一个固定的宽度 */
                height: 100%; /* 或指定一个固定的高度 */
                background-image: url('@/assets/image/login-bg/login-left.jpg');
                background-size: cover; /* 或使用 contain */
                background-position: center; /* 中心对齐 */
                background-repeat: no-repeat; /* 不重复背景图像 */
            }

            
        }
    }

</style>